<template>
	<view>
		
		<view class="box">
		<!-- 单行内容显示 -->
		<uni-list :border="false">
		
			<uni-list-item  title="列表文字" >
				<template slot="body">
					<input class="uni-input" type="text" placeholder="姓名" />
				</template>
				
			
			</uni-list-item>
			<uni-list-item  title="列表文字" >
				<template slot="body">
					<input class="uni-input" type="text" placeholder="身份证号" />
				</template>
			</uni-list-item>
			<uni-list-item  title="列表文字" >
				<template slot="body">
					<input class="uni-input" type="number" placeholder="电话" />
				</template>
			</uni-list-item>
			<uni-list-item  title="列表文字" >
				<template slot="body">
					<input class="uni-input input-code" type="number" placeholder="验证码" />
				</template>
				
				<template slot="footer">
					<text class="code" v-if="showText==true" @click="getCode">发送验证码</text>
					<text class="code" v-else>{{second}}s重新发送</text>
					
					
				</template>
				
			
			</uni-list-item>
			
			<uni-list-item  title="列表文字" >
				<template slot="body">
					  <button type="default"  plain="true" class="btn">确认添加</button>
				</template>
			</uni-list-item>
		</uni-list>
	   </view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				second:60,
				showText:true,
				
				
			}
		},
		methods: {
			getCode(){//倒计时
			    this.showText = false
			    var interval = setInterval(() => {
			        let times = --this.second
			        this.second = times<10?'0'+times:times //小于10秒补 0
			    }, 1000)
			    setTimeout(() => {
			        clearInterval(interval)
			        this.second=60
			        this.showText = true
			    }, 60000)
			},
		}
	}
</script>

<style>
.box{
	margin: 40upx;
}
.code{
	
	position: absolute;
	right: 10upx;
	
}
input{
/* 	border: 1px solid #007AFF; */
	width: 100%;
}
.input-code{
	width: 75%;
}
.btn{
	margin-top: 100upx;
}
</style>
